<%@ taglib prefix="maxlength" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Easy
  Date: 2017-09-27
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="row">
    <div class="col-md-12">

        <form  class="form-horizontal" id="addParkingForm" >
            <div class="panel panel-default">
                <div class="panel-body">

                    <div class="row">
                        <div class="col-md-6">

                            <div class="form-group">
                                <label class="col-md-3 control-label">名称</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <input type="text" class="form-control"  name="name"  >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">省</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select name="province"  id="province" class="form-control required"  onclick="chooseMarket();">
                                            <option selected value="">选择所在的省份</option>
                                            <c:forEach var="item" items="${provinces}" varStatus="status">
                                                <option value="${item.name}">${item.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">区</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                        <select name="area" required id="area"  class="form-control" required>
                                            <option selected value="">请选择所在的区/县</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">经度</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" id="getlng" class="form-control"   name="lng"  readonly >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">白天费用</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" required  name="dayFee" >
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-md-3 control-label">开放时间</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"   required  id="startTime"  name="startTime" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">负责人</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"  name="contacts" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">免费时长</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"   name="charging" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">备注</label>
                                <div class="col-md-9 col-xs-12">
                                    <textarea class="form-control"  rows="5" id="info" name="info"></textarea>
                                </div>
                            </div>


                        </div>


                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-md-3 control-label">总层数</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" required  name="floor" >
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">市</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <select id="city" name="city" required class="form-control"   onclick="chooseArea();"  >
                                            <option selected value="">请选择所在的市</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">详细地址</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" id="getaddress" class="form-control"   name="address" onfocus="openMap()" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">纬度</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" id="getlat" class="form-control"   name="lat"  readonly >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">晚上费用</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control" required name="nightFee" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">结束时间</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text"  class="form-control"  id="stopTime" required  name="stopTime" >
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">联系方式</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-sort"></span></span>
                                        <input type="text" class="form-control"  name="conPhone" >
                                    </div>
                                </div>
                            </div>

                            <div  class="form-group">
                                <input  type="hidden" name="imgId" class="img-id"/>
                                <div class="layui-upload-drag" >
                                    <i class="layui-icon fa fa-cloud-upload"></i>
                                    <p>点击上传停车场地图</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="panel-footer">
                    <button class="btn btn-default">清除</button>
                    <input type="button"class="btn btn-primary" onclick="save()" value="保存">
                </div>
            </div>
        </form>

    </div>
</div>
<script>

$('#startTime').datetimepicker({
        bootcssVer:3,
        format: 'hh:ii:ss',
        weekStart: 1,
        autoclose: 1,
        startView: 1,
        minView: 0,
        minuteStep:10,
        maxView: 1,
        forceParse: 0,
        pickerPosition:'top-right',
        keyboardNavigation:false,
        language:'zh-CN'
    });

$('#stopTime').datetimepicker({
        bootcssVer:3,
        format: 'hh:ii:ss',
        weekStart: 1,
        autoclose: 1,
        startView: 1,
        minView: 0,
        minuteStep:10,
        maxView: 1,
        forceParse: 0,
        pickerPosition:'top-right',
        keyboardNavigation:false,
        language:'zh-CN',

    });

function parentSet(picture) {
        var id=picture.id;
        $(".img-id").val(picture.id);
        var imgDiv= $(".layui-upload-drag");
        imgDiv.empty();
        var img=document.createElement("img");
        img.className="img-parking";
        img.src=picture.src;
        img.setAttribute("max-width","100%");
        img.setAttribute("height","100%");
        img.onerror="${basePath}/static/img/head/default-head.jpg";
        imgDiv[0].appendChild(img);
        imgDiv.css("border-color" ,"#FFFAFA");
        imgDiv.css("background-color" ,"#FFFAFA");
    }

 function openMap(){
        var lat= document.getElementById("getlat").value;//纬度
        var lng= document.getElementById("getlng").value;//经度
        var address=document.getElementById("getaddress").value;//经度
        if(lat!="" && lng!=""){
            otherChoose(lat,lng,address);
        }else{
            firstChoose()
        }
    }

function  firstChoose() {
        $.post("/car/map/baidu", null, function(html){
            window.layer_mapModule = layer.open({
                id:"mapModule",
                type: 1,
                title:"选择地图",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                btn:["确定","取消"],
                yes:function(){
                    $("#getlng").val($("#lng").val());
                    $("#getlat").val($("#lat").val());
                    $("#getaddress").val($("#address").val())
                    layer.close(layer_mapModule);
                },
                btn2:function(){},
                cancel: function(){}
            });
        });
    }

function  otherChoose(lat,lng,address) {
        $.post("/car/map/otherBaidu", {"lat":lat,"lng":lng,"resAddress":address}, function(html){
            window.layer_mapModule = layer.open({
                id:"resMapModule",
                type: 1,
                title:"选择地图",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                btn:["确定","取消"],
                yes:function(){
                    $("#getlng").val($("#lng").val());
                    $("#getlat").val($("#lat").val());
                    $("#getaddress").val($("#address").val())
                    layer.close(layer_mapModule);
                },
                btn2:function(){},
                cancel: function(){}
            });
        });
    }

 $(".layui-upload-drag").on("click",function () {
        layer.open({
            id:'img-list',
            type: 2,
            title: "选择图片(双击选择图片)",
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['1045px','630px'],
            content: '/picture/chooseImg',
        });
    })

function save() {
    var param = serializeForm("addParkingForm");
    var info=$("#info").val();
    var province=$("#province").val();
    var city=$("#city").val();
    var area=$("#area").val();
    if(validform("addParkingForm").form()){
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: param +"&info=" + info +"&province=" + province +"&city=" + city +"&area=" + area,
            async: true,
            url: '/car/parking/saveData',
            success: function (data) {
                if (data.success){
                    layer.msg(data.msg,{icon:1,time:1000},function () {
                        layer.close(top.layer_parkingAdd);
                        reloadPage();
                    });
                }else{
                    layer.msg(data.msg,{icon: 2,time:1000});
                }
            },
            error: function () {
                alert("保存未成功")
            }
        })
    }
}

function  chooseMarket() {
    var options=$("#province option:selected");
    if(options.text()!="选择所在的省份"){
        $.post("/city/chooseCity",{"name":options.val()},function (data) {
            for(var i=0; i<data.length; i++){
                $("#city").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
            };
            var name=data[0].name;
            defaultNext(name);
        });
    }
    $("#city").empty();
    $("#area").empty();
}

function chooseArea() {
    var options=$("#city option:selected");
    if(options.text()!="请选择所在的市"){
        $.post("/city/chooseArea",{"name":options.val()},function (data) {
            for(var i=0; i<data.length; i++){
                $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
            };
        });
    }
    $("#area").empty();
}

function defaultNext(name) {
    $.post("/city/defaultNext",{"name":name},function (data) {
        for(var i=0; i<data.length; i++){
            $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
        };
    });
    $("#area").empty();
}

</script>
